<template>
    <h1>这是王玺的页面</h1>
    <to-do-header @addToDo="addToDo"></to-do-header>
    <to-do-main :list="showList" @delTodo="delTodo"></to-do-main>
    <to-do-footer :lastLength="lastLength" :status="status" @updateStatus="updateStatus"></to-do-footer>
</template>
<script setup>
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoMain from './components/ToDoMain.vue';
import ToDoFooter from './components/ToDoFooter.vue';
import { ref,computed } from 'vue';
const list = ref([
    {id:1,name:"学习Vue3",done:false},
    {id:2,name:"跑步",done:true},
]);
function addToDo(name){
  if(name !=""){
    list.value.push({name,done:false,id: Math.floor(Math.random() * 100)});
  }else{
    alert("任务不能为空");
  }
}
function delTodo(id){
    list.value=list.value.filter((item)=>item.id !=id);
}
//计算未完成任务总数
const lastLength=computed(()=>{
    return list.value.filter((item)=>!item.done).length;
});
//定义任务状态
const status=ref("所有");
const showList=computed(()=>{
    if(status.value=="所有"){
        return list.value;
    }
    if(status.value=="待办"){
        return list.value.filter((item)=>!item.done);
    }
    if(status.value=="完成"){
        return list.value.filter((item)=>item.done);
    }
});
function updateStatus(statuss){
    status.value=statuss;
}
</script>

<style>
</style>
